<!--
 * @Author: hq
 * @Date: 2022-08-05 14:56:32
 * @LastEditors: hq
 * @LastEditTime: 2022-08-05 15:11:11
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="金额" prop="money">
            <el-input
              placeholder="请输入金额"
              v-model="ruleForm.money"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户" prop="user">
            <el-input
              placeholder="请填写用户，以空格隔开"
              type="textarea"
              v-model="ruleForm.user"
            ></el-input>
          </el-form-item>
          <el-form-item label="证明" :required="true">
            <div class="purchase">
              <div
                class="purchase_con"
                v-for="(item, index) in ruleForm.prove"
                :key="index"
              >
                <div class="l">
                  <div class="flex">
                    <div>标题：</div>
                    <el-input
                      placeholder="请输入标题"
                      v-model="item.title"
                    ></el-input>
                  </div>
                  <div class="flex">
                    <div>内容：</div>
                    <el-input
                      placeholder="请输入内容"
                      v-model="item.desc"
                      type="textarea"
                    ></el-input>
                  </div>
                </div>
                <div v-if="index === 0" @click="handleAddPro">
                  <i class="el-icon-plus hand_cs"></i>
                </div>
                <div>
                  <i
                    v-if="index != 0"
                    @click="handleDelPro(index)"
                    class="el-icon-delete hand_cs"
                  ></i>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              placeholder="请输入备注"
              type="textarea"
              v-model="ruleForm.remark"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        money: "",
        user: "",
        prove: [{ title: "", desc: "" }],
        remark: "",
      },
      rules: {
        money: [{ required: true, message: "请输入金额", trigger: "blur" }],
        user: [{ required: true, message: "请填写用户", trigger: "blur" }],
      },
    };
  },
  methods: {
    //新增证明
    handleAddPro() {
      this.ruleForm.prove.push({ title: "", desc: "" });
    },
    //删除证明
    handleDelPro(index) {
      this.ruleForm.prove.splice(index, 1);
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.purchase {
  padding-top: 50px;
  box-sizing: border-box;
  .purchase_con {
    display: flex;
    align-items: center;
    font-size: 13px;
    .l {
      width: 95%;
      .flex {
        // width: 400px;
        display: flex;
        align-items: center;
        .el-input,
        .el-textarea {
          width: 85%;
        }
        div {
          flex-shrink: 0;
          margin-bottom: 20px;
        }
      }
    }
    i {
      font-size: 30px;
      flex-shrink: 0;
    }
  }
}
</style>
